<template>
  <el-card class="box-card father" v-loading="loading">
    <div slot="header" class="clearfix">
      <el-link :underline="false" class="text">考试信息</el-link>
    </div>

    <div class="exam-container">
      <!--有考试-->
      <div v-if="exams !== null">
        <!--已完成的列表-->
        <el-card class="exam-item" shadow="hover"  v-for="(item, index) in finished" :key="item.exam_id">
          <div slot="header" class="clearfix">
            <span>{{ item.exam_date | timestampToTime}}</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="getDetails(item.exam_id, item.exam_type)">查看详情</el-button>
          </div>
          <div class="exam-item-text">
            <!--<el-link :underline="false" class="text">考试id : {{ item.exam_id }}</el-link>-->
            <el-link :underline="false">考试类型 : {{ item.exam_type | typeToString}}</el-link>
            <el-link :underline="false">考试分数 : {{ item.score }}</el-link>
            <el-link :underline="false">试卷总分 : {{ item.total_score }}</el-link>
          </div>
          <el-progress :percentage="Math.floor((item.score / item.total_score) * 100) " :format="format" :color="customColors"></el-progress>
        </el-card>

        <!--未完成的列表-->
        <el-card class="exam-item" shadow="hover"  v-for="(item, index) in unfinished" :key="item.exam_id">
          <div slot="header" class="clearfix">
            <span>{{ item.exam_date | timestampToTime}}</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="goto">点击进入考试</el-button>
          </div>
          <div class="exam-item-text text">
            <el-link :underline="false" class="text">考试id : {{ item.exam_id }}</el-link>
            <el-link :underline="false" class="text">考试类型 : {{ item.exam_type }}</el-link>
          </div>

          <el-link :underline="false" class="text">考试进行中</el-link>

        </el-card>
      </div>

      <div v-else style="height: 400px;min-height: 400px;line-height: 400px;text-align: center">
        <el-link :underline="false" style="font-size: 20px;font-weight: 500;">当前没有考试，请先开始考试!</el-link>
      </div>
    </div>

  </el-card>
</template>


<script>
    export default {
      name: "info",
      data(){
        return{
          loading : true,

          customColors: [
            {color: '#ed2727', percentage: 0},
            {color: '#f56c6c', percentage: 20},
            {color: '#e6a23c', percentage: 40},
            {color: '#6f7ad3', percentage: 60},
            {color: '#1989fa', percentage: 80},
            {color: '#5cb87a', percentage: 90},
          ],

          exams : {},
          finished : [],
          unfinished : [],
        }
      },
      methods : {
        getDetails(exam_id, exam_type){
          console.log(exam_id, exam_type)
          this.$router.push({ path: `/user/details/${exam_id}/${exam_type}`,})
        },
        goto(){
          this.$router.push({path: '/user/exam'})
        },
        format(percentage) {
          if (percentage >= 90){
            return "优秀";
          }else if (percentage >= 80){
            return "良好";
          }
          else if (percentage >= 60){
            return "及格";
          }else return "不及格"
        },
        initData(page){//初始化数据
          this.$axios({
            method : "GET",
            url:"/user?method=all&currentPage=" + page,
          }).then((response)=>{
            //console.log(response.data);
            this.exams = response.data;
            if (this.exams !== null){
              for (const item of this.exams.list) {
                if (item.state === 1){
                  this.finished.push(item)
                }else{
                  this.unfinished.push(item)
                }
              }
            }
            this.loading = false;
          }).catch((error)=>{
            console.log(error);
          });
        },
      },
      filters:{
        typeToString(type){//类型转字符串
          switch (type) {
            case 1 :return "单选";break;
            case 2 :return "判断";break;
            case 3 :return "主观";break;
          }
        },
        // 时间戳转换成时间
        timestampToTime (timestamp) {
          let date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          let Y = date.getFullYear() + '-'
          let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
          let D = date.getDate() + ' '
          let h = date.getHours() + ':'
          let m = date.getMinutes() + ':'
          let s = date.getSeconds()
          s = s < 10 ? '0' + s : s;
          return Y+M+D+h+m+s;
        },
      },
      beforeMount (){//初始化数据
        this.initData(1)
      },
      mounted(){
      },
    }
</script>

<style scoped>
  .father{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .exam-item{
    flex-grow: 1;
    width: 24%;
    height: 200px;
    display: inline-block;
    margin: 15px 0;
  }
  .exam-item-text{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin-bottom: 8px;
  }
  .exam-item-text a{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px;
  }
  .exam-item:not(:nth-child(4n)) {
    margin-right: calc(4% / 3);
  }

  .father > .el-card__header{
    background-color: rgba(0,0,0,.03);
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

</style>
